<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定时器(timer)</title>
  </head>
  <body>
    <script>
      // 1. setTimeout
      // 语法：setTimeout(回调函数, 延迟时间)
      // 延迟时间单位是毫秒，1000毫秒 = 1秒
      // 返回值：返回一个定时器编号，用于清除定时器
      // 注意：定时器是异步的，不会阻塞代码执行
      // 1.1 延迟执行
      const TIME_OUT = 1000;
      let timer = setTimeout(() => {
        console.log("定时器执行了");
      }, TIME_OUT);

      // 2. setInterval
      // 语法：setInterval(回调函数, 间隔时间)
      // 间隔时间单位是毫秒，1000毫秒 = 1秒
      // 返回值：返回一个定时器编号，用于清除定时器
      // 注意：定时器是异步的，不会阻塞代码执行
      // 2.1 每隔一段时间执行一次
      const INTERVAL = 1000;
      let interval = setInterval(() => {
        console.log("定时器执行了");
      }, INTERVAL);

      // 3. clearTimeout
      // 语法：clearTimeout(定时器编号)
      // 注意：清除定时器时，需要传入定时器编号，否则无法清除
      // 3.1 清除定时器
      clearTimeout(timer);

      // 4. clearInterval
      // 语法：clearInterval(定时器编号)
      // 注意：清除定时器时，需要传入定时器编号，否则无法清除
      // 4.1 清除定时器
      clearInterval(interval);

      // 5. 定时器的应用
      // 1. 倒计时
      // 2. 轮播图
      // 3. 防抖和节流
      // 4. 轮询
      // 5. 定时发送请求
      // 6. 定时更新页面数据
    </script>
  </body>
</html>
